<template>
  <div class="red" @click="show">bar {{$store.state.username}}</div>
</template>

<script>
export default {
  metaInfo: {
    title: 'bar'
  },
  asyncData({store}){  // 只在服务端运行
    // 等他获取完再返回页面
    // nuxt 规定只有在页面级组件才能使用
    return store.dispatch('set_username')
  },
  mounted(){
    // 这边是 前端 跳转 的时候没有经过服务端  store不会变化  所以在加个
    console.log('前端来了bar')
    this.$store.dispatch('set_username')
  },
  methods: {
    show(){
      console.log(1)
    }
  },
  created(){
    console.log('create 执行')
  }
}
</script>

<style scoped>
.red{
  color: red;
}
</style>
